<script setup lang="ts">
import { ref } from 'vue';
import AuColorPicker from './components/AuColorPicker.vue';
import AuColorPickerPresetsNested from './components/AuColorPickerPresetsNested.vue'
import { NamedPreset } from './components/common/pickerProps';

function emitChangeHandlerDemo(_val:string){
  //console.log('change'+_val)
}
function emitDoneHandlerDemo(_val:string){
  console.log('done'+_val)
}
function presetSwitchedHandlerDemo(_val?:string){
  console.log('switched'+_val)
}

const picker = ref<InstanceType<typeof AuColorPicker>>()
const pickerNested = ref<InstanceType<typeof AuColorPickerPresetsNested>>()
function enforceToDemo(){
  picker.value?.enforceTo('#ff00ff')
  pickerNested.value?.enforceCustomValueTo('#ff00ff')
  pickerNested.value?.enforcePresetTo('水系')
}

const presets:NamedPreset[] = [
  {
    name: '水系',
    colorHex: '#c3e5eb'
  },
  {
    name: '绿地',
    colorHex: '#ceeda4'
  },
]
const spn = true
</script>

<template>
  <div class="demoPickers" @click="console.log('clicked')">
    <AuColorPicker :initial="'#ffff00'" @change="emitChangeHandlerDemo" @done="emitDoneHandlerDemo"
      :show-package-name="spn" :entry-respond-delay="0" :panel-click-stop-propagation="true" ref="picker" :pos="'left'"></AuColorPicker>
    <AuColorPickerPresetsNested :initial="'#00ffff'" :presets="presets" :initial-selected-preset="'绿地'" :pos="-10" :pos-internal="-30"
      @change="emitChangeHandlerDemo" @done="emitDoneHandlerDemo" @preset-switched="presetSwitchedHandlerDemo"
      :show-package-name="spn" :panel-click-stop-propagation="true" ref="pickerNested"></AuColorPickerPresetsNested>
  </div>
  <div style="margin: 10px;padding: 20px;height: 300px;width: 300px;overflow: auto;">
    <div style="height: 500px;width: 500px;">
      <AuColorPicker :initial="'#ffff00'" :pos="20"></AuColorPicker>
    </div>
  </div>
  <button class="enforceBtn" @click="enforceToDemo">外部调用enforceTo</button>
</template>

<style scoped>
.demoPickers{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 300px;
}
.enforceBtn{
  position: fixed;
  left: 0px;
  bottom: 0px;
}
</style>
